﻿@using Newtonsoft.Json;
@using MyProject.JQueryStudies.Models;
@using MyProject.JQueryStudies.App_Code; 

@model Portal

@{
    ViewBag.Title = "Index";
    ViewBag.PortalXml = CLRHelper.SerializeToXmlString<Portal>(Model);
    ViewBag.PortalJson = JsonConvert.SerializeObject(Model);
}

@section head{
    <link href="~/Scripts/libs/jquery-easyui/extensions/jquery-easyui-portal/portal.css" rel="stylesheet" />

    <style type="text/css">
		.title{
			font-size:16px;
			font-weight:bold;
			padding:20px 10px;
			background:#eee;
			overflow:hidden;
			border-bottom:1px solid #ccc;
		}

		.t-list{
			padding:5px;
		}
	</style>
}

<div region="north" class="title" border="false" style="height:60px;">
    @ViewBag.PortalXml

    <hr />

    @ViewBag.PortalJson
</div>

<div region="center" border="false">
	<div id="pp" style="position:relative">
		<div style="width:30%;">
			<div title="Clock" style="text-align:center;background:#f3eeaf;height:150px;padding:5px;">
				<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100" height="100">
				    <param name="movie" value="http://www.respectsoft.com/onlineclock/analog.swf">
				    <param name=quality value=high>
				    <param name="wmode" value="transparent">
				    <embed src="http://www.respectsoft.com/onlineclock/analog.swf" width="100" height="100" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
				</object>
			</div>
			<div title="Tutorials" collapsible="true" closable="true" style="height:200px;padding:5px;">
			    <div class="t-list"><a href="http://www.jeasyui.com/tutorial/datagrid/datagrid1.php">Build border layout for Web Pages</a></div>
			    <div class="t-list"><a href="http://www.jeasyui.com/tutorial/layout/panel.php">Complex layout on Panel</a></div>
			    <div class="t-list"><a href="http://www.jeasyui.com/tutorial/layout/accordion.php">Create Accordion</a></div>
			    <div class="t-list"><a href="http://www.jeasyui.com/tutorial/layout/tabs.php">Create Tabs</a></div>
			    <div class="t-list"><a href="http://www.jeasyui.com/tutorial/layout/tabs2.php">Dynamically add tabs</a></div>
			    <div class="t-list"><a href="http://www.jeasyui.com/tutorial/layout/panel2.php">Create XP style left panel</a></div>
			</div>
		</div>
		<div style="width:40%;">
			<div id="pgrid" title="DataGrid" closable="true" style="height:200px;">
				<table class="easyui-datagrid" style="width:650px;height:auto"
						fit="true" border="false"
						singleSelect="true"
						idField="itemid" url="/Scripts/libs/jquery-easyui/extensions/jquery-easyui-portal/datagrid_data.json">
					<thead>
						<tr>
							<th field="itemid" width="60">Item ID</th>
							<th field="productid" width="60">Product ID</th>
							<th field="listprice" width="80" align="right">List Price</th>
							<th field="unitcost" width="80" align="right">Unit Cost</th>
							<th field="attr1" width="120">Attribute</th>
							<th field="status" width="50" align="center">Status</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
		<div style="width:30%;">
			<div title="Searching" iconCls="icon-search" closable="true" style="height:80px;padding:10px;">
				<input class="easyui-searchbox">
			</div>
			<div title="Graph" closable="true" style="height:200px;text-align:center;">
				<img height="160" src="http://knol.google.com/k/-/-/3mudqpof935ww/ip4n5y/web-graph.png"></img>
			</div>
		</div>
	</div>
</div>

@section scripts{
    <script src="~/Scripts/libs/jquery-easyui/extensions/jquery-easyui-portal/jquery.portal.js"></script>
    
    <script type="text/javascript">
        $(function () {
            $('#pp').portal({
                border: false,
                fit: true
            });

            add();
        });

        function add() {
            for (var i = 0; i < 3; i++) {
                var p = $('<div/>').appendTo('body');
                p.panel({
                    title: 'Title' + i,
                    content: '<div style="padding:5px;">Content' + (i + 1) + '</div>',
                    height: 100,
                    closable: true,
                    collapsible: true
                });
                $('#pp').portal('add', {
                    panel: p,
                    columnIndex: i
                });
            }
            $('#pp').portal('resize');
        }

        function remove() {
            $('#pp').portal('remove', $('#pgrid'));
            $('#pp').portal('resize');
        }
	</script>
}